<template>
    <div class="toast">
      <div>{{message}}</div>
    </div>
</template>

<script>
    export default {
      name: "Toast",
      // props:{
      //   message:{
      //       type:String,
      //       default:''
      //     },
      //   show:{
      //     type:Boolean,
      //     default: false
      //   }
      // },
      data(){
        return{
          message:'',
          isshow:false
        }
      },
      methods:{
        show(message,duration=2000){
          //默认参数
          // duration=duration||2000

          this.isshow=true
          this.message=message

          setTimeout(()=>{
            this.isshow=false
            this.message=''
          },duration)
        }
      }
    }
</script>

<style scoped>
  .toast{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 8px 10px;
    z-index: 999;

    background-color: rgba(0,0,0,.75);
    color: #ffffff;
  }
</style>
